import React from "react"
import {
  View,
  Swiper,
  SwiperItem,
  Image,
  Text,
  navigateTo
} from "@remax/wechat"

export default () => {

  const headerSwiperItems = [
    { id: 1, title: 'title', img: 'https://s4.ax1x.com/2021/12/08/o2aZRO.png' },
    { id: 2, title: 'title', img: 'https://s4.ax1x.com/2021/12/08/o2aZRO.png' },
    { id: 3, title: 'title', img: 'https://s4.ax1x.com/2021/12/08/o2aZRO.png' }
  ]

  const headerNavList = [
    { id: 1, title: '校内活动', ico: 'https://s4.ax1x.com/2021/12/08/o2w18f.png' },
    { id: 2, title: '周边生活', ico: 'https://s4.ax1x.com/2021/12/08/o2wJKg.png' },
    { id: 3, title: '本校圈子', ico: 'https://s4.ax1x.com/2021/12/08/o2w328.png' },
    { id: 4, title: '校园头条', ico: 'https://s4.ax1x.com/2021/12/08/o2wM5t.png' },
    { id: 5, title: '技能培训', ico: 'https://s4.ax1x.com/2021/12/08/o2wYrQ.png' },
    { id: 6, title: '招聘会', ico: 'https://s4.ax1x.com/2021/12/08/o2wlPP.png' },
    { id: 7, title: '考研', ico: 'https://s4.ax1x.com/2021/12/08/o2wtbj.png' },
    { id: 8, title: '校园服务', ico: 'https://s4.ax1x.com/2021/12/08/o2w8xS.png' }
  ]

  const subAdvertisementList = [
    { id: 1, title: '不想工作就考研吧', bg: 'https://s4.ax1x.com/2021/12/08/o2qRPI.png' },
    { id: 2, title: '良心推荐考证课程', bg: 'https://s4.ax1x.com/2021/12/08/o2qgIA.png' }
  ]

  const interactionList = [
    { id: 1, img: 'https://s4.ax1x.com/2021/12/08/o2vqgI.png' },
    { id: 2, img: 'https://s4.ax1x.com/2021/12/08/o2vLvt.png' },
    { id: 3, img: 'https://s4.ax1x.com/2021/12/08/o2vXKP.png' }
  ]

  const HeaderNav = ({ props }) => {

    const { title, ico } = props

    const handleClick = () => {
      navigateTo({
        url: '/pages/index/HotTopic'
      })
    }

    return (
      <View className="cl_index_nav_item" onClick={handleClick}>
        <Image src={ico} className="cl_ini_img" mode="widthFix"></Image>
        <View className="cl_ini_title">{title}</View>
      </View>
    )
  }

  const SubAdvertisement = ({ props }) => {

    return (
      <View className="cl_index_sub_advertisement" style={{ backgroundImage: `url(${props.bg})` }} >
        <Text>{props.title}</Text>
      </View>
    )
  }

  return (
    <View className="cl_index">
      <View className="cl_index_header">
        <Swiper
          circular={true}
          autoplay={true}
          interval={3000}
          indicatorDots={true}
          indicatorActiveColor='#FCFCFC'
        >
          {
            headerSwiperItems.map(item => {
              return (
                <SwiperItem key={item.id} >
                  <Image src={item.img} className="cl_index_header_img" ></Image>
                </SwiperItem>
              )
            })
          }
        </Swiper>
      </View>
      <View className="cl_index_nav">
        {
          headerNavList.map(item => {
            return <HeaderNav key={item.id} props={{ title: item.title, ico: item.ico }} />
          })
        }
      </View>
      <View className="cl_index_notice">
        <Image src="https://s4.ax1x.com/2021/12/08/o2bmp6.png" />
        <Text>最新教师资格证新手报考指南</Text>
      </View>
      <View className="cl_index_advertisement">
        <Image src="https://s4.ax1x.com/2021/12/08/o2bzEd.png" mode="widthFix" />
        {
          subAdvertisementList.map(item => {
            return <SubAdvertisement key={item.id} props={{ title: item.title, bg: item.bg }} />
          })
        }
      </View>
      <View className="cl_index_interaction">
        <Text>互动区</Text>
        <View className="cl_ii_scroll">
          {
            interactionList.map(item => {
              return <Image key={item.id} src={item.img} mode="widthFix" />
            })
          }
        </View>
        <Image src="https://s4.ax1x.com/2021/12/08/oRGsCF.png" mode="widthFix" />
      </View>
      <View className="cl_index_activity">
        <Text>最新活动</Text>
        <Image src="https://s4.ax1x.com/2021/12/08/oRQ4qf.png" style={{ width: '80%' }} mode="widthFix" />
      </View>
    </View>
  )
}